<template>
<!--  <h2>存储空间统计</h2>-->
  <div class="app-container">
    <h2 style="margin: 0 auto; width: 50%; margin-top: 3%">{{title}}</h2>
    <div style="width: 100%; margin-top: 1%">
      <div id="space" style="margin: 0 auto; width: 50%; height:500px;"></div>
    </div>
  </div>
</template>

<script>
import {storageSpaceTj} from "@/api/archive/statistics/storageSpaceStatistics/storageSpaceStatistics";
import * as echarts from "echarts";

export default {
  name: "index",
  data() {
    return {
      title: ''
    }
  },
  created() {
    const now = new Date();
    const currentYear = now.getFullYear();

    const currentMonth = String(now.getMonth() + 1).padStart(2, '0');
    const currentDate = String(now.getDate()).padStart(2, '0');
    this.date = currentYear + "年" + currentMonth + "月" + currentDate + "日"
    this.getData()
  },
  methods: {
    getData() {
      storageSpaceTj().then(res=>{
        this.title = '总空间为:' + res.data.total + 'GB, 已用空间为:'  + res.data.used + 'GB, 可用空间为:' + res.data.free + 'GB'
        var data = [
          {value: res.data.used, name: '已用空间'},
          {value: res.data.free, name: '可用空间'},
        ]
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById('space'));
          var option = {
            title: {
              text: '存储空间统计',
              subtext: this.date,
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          myChart.setOption(option);
        })
      })
    },
  }
}
</script>

<style scoped>

</style>
